<template>
    <div>
        <div class="search">
            <input class="iconfont search-input" 
                   type="text" :placeholder="icon"
                   v-model="keyword">
        </div>
        <div class="search-list" ref="search" v-show="keyword">
            <ul>
                <li class="search-item border-topbottom"
                     v-for="item in list" :key="item.addr"
                     @click="handleclickchange(item)"
                     >{{item.addr}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapActions } from 'vuex'
export default {
  name: 'classsearch',
  props:{
      allclass:Object,
  },
  data() {
      return {
          icon:"\ue632 请输入专业或班级",
          keyword:'',
          list:[]
      }
  },
  methods: {
      handleclickchange(item){
          // this.$store.dispatch('changeclass',nowclass)  
           this.changeclass(item)
           this.$router.push('/home')
      },
      ...mapActions(['changeclass'])
  },
  watch:{
      keyword(){
      if (!this.keyword) {
          this.list=[]
          return
      }
      const result = []
      for(let i in this.allclass){
          this.allclass[i].forEach((value) => {
              if (value.addr.indexOf(this.keyword)>-1) {
                  result.push(value)
              }     
          });
      }
      this.list = result
      }
  },
  mounted(){
      this.scroll = new BScroll(this.$refs.search,{click:true})
  },
  activated(){
      this.scroll.refresh()
  }
}
</script>

<style scoped>
    .search{
        background:rgb(100, 124, 204);
        height: .72rem;
        padding: 0 .1rem;
    }
    .search-input{
        box-sizing: border-box;
        padding: 0 .1rem;
        height: .62rem;
        line-height: .62rem;
        width: 100%;
        border-radius: .06rem;
        text-align: center;
        color: #666;
    }
    .search-list{
        z-index: 1;
        overflow: hidden;
        background:#eee;
        position: absolute;
        top: 1.58rem;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .search-item{
        background: #fff;
        padding-left: .2rem;
        line-height: .8rem;
        font-size: .32rem
    }
</style>